<script setup lang="ts">
import { toRefs, onMounted, reactive } from "vue";

interface SinglePoetSource {
  poetId: number | string;
}

const props = defineProps<SinglePoetSource>();

const { poetId } = toRefs(props);

interface SourceObjType {
  sourceBookName: string;
  sourceBookTotal?: string;
  sourceBookDynasty?: string;
  sourceBookAuthor?: string;
  sourceBookType?: string;
  sourceBookNum?: string;
  sourceBookMessage: string;
}

const poetSourceData = reactive<{ messageList: SourceObjType[] }>({
  messageList: [],
});

onMounted(() => {
  getPoetMessageList();
  // 初始化加载溯源的信息
});

/**
 * 用于获取诗句溯源的数据
 * 从poetId中获得
 */
const getPoetMessageList = () => {
  getTestMockApi(poetId.value).then((res) => {
    const resArray = res as string[];
    console.log(resArray);
    // poetSourceData.messageList = res as string[];
    // for (let resStr of resArray) {
    //   poetSourceData.messageList.push(formatSourceData(resStr));
    // }
    poetSourceData.messageList = [
      {
        sourceBookName: "誠齋集",
        sourceBookTotal: "133卷",
        sourceBookDynasty: "宋",
        sourceBookAuthor: "楊萬里撰",
        sourceBookType: "宋端平二年刻本 ",
        sourceBookNum: "卷七",
        sourceBookMessage:
          "纔露尖尖角早有蜻蜓立上頭 題左正卿壽慈堂萬事絲窠黏露珠奉親最樂天下無丘明遠孫千里駒有母七十髪漆如雪底笋生冰底魚人間無覔天賜渠三更月落堂西隅母自挑燈兒讀書去年",
      },
      {
        sourceBookName: "宋詩鈔初集",
        sourceBookTotal: "95卷",
        sourceBookDynasty: "清",
        sourceBookAuthor: "吕留良、吳之振、吳爾堯輯",
        sourceBookType: "清康熙十年刻本",
        sourceBookNum: "誠齋江湖集鈔 ",
        sourceBookMessage:
          "小池泉眼無聲惜細流樹陰照水愛晴柔小荷纔露尖尖角早有蜻蜒立上頭 題劉伯山蕃殖圖二处 畫禾黍桂菽麥 老子平生只荷鋤誤擕破硯到清都歸來荒盡西疇却媿見劉家蕃殖圖黃",
      },
      {
        sourceBookName: "駢字類編",
        sourceBookTotal: "240卷",
        sourceBookDynasty: "清",
        sourceBookAuthor: "吳士玉、沈敬宗輯",
        sourceBookType: "清雍正六年刻本 ",
        sourceBookNum: "卷一百二十三",
        sourceBookMessage:
          "方隅門十一 侯賔榻容居最丨丨齊已看雲詩深處卧來真隱逸丨丨行去是神仙揚萬里小池詩小荷纔露尖尖角早有蜻蜓立丨丨 上面 宋書武帝紀道覆聞毅上馳使報循曰毅兵衆甚盛成敗事係之於此宜并",
      },
      {
        sourceBookName: "詠物詩選",
        sourceBookTotal: "486卷",
        sourceBookDynasty: "清",
        sourceBookAuthor: "張玉書等輯",
        sourceBookType: "清康熙四十六年刻本",
        sourceBookNum: "卷一百三",
        sourceBookMessage:
          "池類附沼 小池 宋 楊萬里泉眼無聲澀細流樹隂照水愛晴柔小荷纔露尖尖角早有蜻蜓立上頭 附沼 五言絶句 胡蘆沼 唐 張 籍",
      },
    ];
  });
};

/**
 *
 * @param {string} inputStr
 * @return {SourceObjType}
 */
const formatSourceData = (inputStr: string) => {
  let resData: SourceObjType = { sourceBookName: "", sourceBookMessage: "" };
  const splitItems = inputStr.split(" ");

  resData.sourceBookName = splitItems[0]; // "誠齋集133卷"
  resData.sourceBookAuthor = splitItems[1]; // "（宋）楊萬里撰"
  resData.sourceBookType = splitItems[2]; // "宋端平二年刻本"
  resData.sourceBookNum = splitItems[3]; // "卷十六"

  const restOfSentence = splitItems.slice(4).join(" ");
  resData.sourceBookMessage = restOfSentence;
  return resData;
};

/**
 * 测试函数
 * @param {number|string} poetId
 * @return {Promise<string[]>}
 */
const getTestMockApi = (poetId: string | number) => {
  const mockDataList = [
    "誠齋集133卷 （宋）楊萬里撰 宋端平二年刻本\n" +
      "卷十六 苦惱併將恩怨惱天公 岸沙水嫌岸窄要衝開細蕩沙痕似翦裁蕩去蕩來元不覺忽然一片岸沙摧 遣悶江樹深春色村雞薄晚聲雨添靑笠重人减畫船輕遣悶惟須睡哦詩只强成獨判連",
    "宋詩鈔初集95卷 （清）吕留良、吳之振、吳爾堯輯 清康熙十年刻本\n" +
      "誠齋南海集鈔 脚急吹開莫因嶺外無花卉便對春光廢酒杯只揀茂林脩竹處蘭亭褉事足追囘 岸沙水嫌岸窄要衝開細蕩沙痕似剪裁蕩去蕩來元不覺忽然一片岸沙摧 遣悶江樹㴱春色村雞薄晚聲雨添",
  ];
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(mockDataList);
    }, 3000);
  });
};
</script>

<template>
  <div>
    <h5 class="left-align-title">诗词溯源</h5>
    <div>
      <el-table :data="poetSourceData.messageList" stripe style="width: 100%">
        <el-table-column prop="sourceBookName" label="题名" width="60" />
        <el-table-column prop="sourceBookTotal" label="总卷册" width="100" />
        <el-table-column prop="sourceBookDynasty" label="朝代" width="100" />
        <el-table-column prop="sourceBookAuthor" label="著者" width="100" />
        <el-table-column prop="sourceBookType" label="版本" width="100" />
        <el-table-column prop="sourceBookNum" label="分卷" width="100" />
        <el-table-column prop="sourceBookMessage" label="原文" width="360" />
      </el-table>
    </div>
  </div>
</template>

<style scoped>
.left-align-title {
  text-align: left;
}
</style>
